<template>
  <div>
    <div class="box">
        <div class="top">
            <img src="https://static.asus.com.cn/store/20230202/18492553565597.png" alt="" class="img1">
            <div class="right">
                <img src="https://static.asus.com.cn/store/20230201/21383155985655.png" alt="">
                <img src="https://static.asus.com.cn/store/20230204/15133648100974.png" alt="">
            </div>
        </div>
        <div class="bottom">
            <img src="https://static.asus.com.cn/store/20230202/18433757569850.png" alt="">
            <img src="https://static.asus.com.cn/store/20230201/21394310251991.png" alt="">
            <img src="https://static.asus.com.cn/store/20230201/21413410153571.png" alt="">
            <img src="https://static.asus.com.cn/store/20230201/21421757569852.png" alt="">
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/banner"
        }).then(res => {
            console.log(res.data);
        })
    }

}
</script>

<style lang="scss" scoped>
.box{
    .top{
        width: 95vw;
        height: 55.2vw;
        margin: auto;
        margin-top: 2vw;
        .img1{
        height: 55.2vw;
        float: left;
        }
        .right{
            width: 40vw;
            float: left;
        height: 55.2vw;

            img{
                height: 27vw;
                float: left;
                margin-top: .5vw;
            }
        }
    }
    .bottom{
        width: 95vw;
        height: 55.2vw;
        margin: auto;

        img{
        height: 27vw;
        }
    }
}

</style>